<template>
	<div class='container container-padding '>
		<nav-header></nav-header>
		<div class='panel-body' @click='showRefundCause'>
			<span class='title'>退款原因</span>
			<div class='flex-grow'></div>
			<span class='title'>{{refund.reason_info != null ? refund.reason_info : "请选择"}}</span>
			<img class='icon-triangle' src='../../../static/img/triangle.svg' />
		</div>

		<!--<div class='panel-body'>
			<span class='title'>退款金额</span>
			<div class='flex-grow'></div>
			<span class='title'>{{refund.money}}</span>
		</div>-->

		<div class='panel-body-vertical'>
			<span class='title'>详情说明</span>
			<textarea class='textarea-content' ref="textarea" placeholder='您可以告诉我们您的退款原因，我们会及时处理你的退款申请' data-name="causeDetails" bindinput="inputChange" />
			<div class='img-contaier'>
				<div v-for="(item,index) in selectImg" :key="item.index" class='cause-item'>
					<img class='icon-del' src='../../../static/img/deletephoto.svg' bindtap='delSelectImg' />
					<img class='cause-img' :src='item' mode='aspectFill' />
				</div>
				<div class='add-img-btn' @click='chooseImageEvent'>
					<img src='../../../static/img/camera.svg' />
				</div>
			</div>
		</div>
		<div class='commit-btn' @click="commitRefund">
			<span>提交</span>
		</div>
		<div v-if="showChooseModel" class='modal' @click='hiddenModal'>
			<div class='modal-dialog' @click.stop="">
				<div class='modal-content'>
					<div class='modal-body'>
						<div class='refund-csuse-item' v-for="(item,index) in causeList" @click="chooseRefundCause($event,item.reason_info,item.reason_id)" :key="item.id"><span>{{item.reason_info}}</span></div>
					</div>
				</div>
			</div>
		</div>
		<choose-image ref='chooseImage' :chooseImage="chooseImage"></choose-image>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import header from "@/components/header/header"
	import chooseImage from '@/components/choose-image/choose-image'
	import { getVersionsUrl } from '@/common-func/common-func'
	import server from '@/server/api';
	import { mapGetters, mapState, mapActions } from 'vuex';

	const baseUrl = require('@/config/config').baseUrl
	export default {
		data() {
			return {
				showChooseModel: false,
				refund: {
					buyer_message: null,
					member_id: null,
					order_id: null,
					pic_info: null,
					reason_id: null,
					reason_info: null,
				},
				selectImg: [],
				causeList: []
			}
		},
		computed: {
			...mapState(['orderDetail', 'userInfo'])
		},
		methods: {
			showRefundCause() {
				this.showChooseModel = true;
			},
			chooseRefundCause(event, cause, id) {
				this.refund.reason_info = cause;
				this.refund.reason_id = id;
				this.showChooseModel = false;
			},
			hiddenModal() {
				this.showChooseModel = false;
			},
			chooseImageEvent() {
				this.$refs.chooseImage.show();
			},
			chooseImage(evt) {
				var options = {
					method: 'POST',
				}
				if((this.selectImg.length + evt.length) > 4) {
					Toast("一次最多只能上传四张！")
					return;
				}

				var task = plus
					.uploader
					.createUpload(
						baseUrl + getVersionsUrl("/index/order/upload"),
						options,
						this.uploadCompletedCB
					);
				for(var i = 0; i < evt.length; i++) {
					var isSuccess = task.addFile(evt[i].filePath, {
						key: 'file'
					});
					if(isSuccess) {
						this.selectImg.push(evt[i].dataBase64)
					}
				}
				task.start();
			},
			uploadCompletedCB(upload, status) {
				console.log(status)
				if(status == 200) {
					Toast("图片上传成功！")
				}
			},
			commitRefund() {
				this.refund.buyer_message = this.$refs.textarea.value;
				this.refund.order_id = this.orderDetail.order_id;
				this.refund.member_id = 101076;
				if(!this.refund.reason_id) {
					Toast("请选择退款原因！");
					return;
				}
				server.post('/index/order/order_refund', this.refund, function(res) {
					console.log(res)
					if(res.error != 0) {
						Toast(res.message)
						return;
					}
					Toast({
						message: '已提交！',
						iconClass: 'mint-toast-icon mintui mintui-success',
					});
				});
				console.log(this.refund)
			}

		},
		created() {
			const _this = this;
			server.post("/index/order/reason_list", function(res) {
				if(res.error == 0) {
					_this.causeList = res.data;
				}
			});
		},
		components: {
			'choose-image': chooseImage,
			"nav-header": header,
		}
	}
</script>

<style scoped>
	/* pages/container/apply-refund/apply-refund.wxss */
	
	.container {
		margin: 90px 0 0;
		padding: 0 40px;
	}
	
	.panel-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.panel-body-vertical {
		padding: 25px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.panel-body .title,
	.panel-body-vertical .title {
		color: #67666b;
		font-size: 32px;
	}
	
	.icon-triangle {
		margin-left: 30px;
	}
	
	.panel-body-vertical .textarea-content {
		border: none;
		margin: 20px 0 100px;
		color: #9b9b9b;
		font-size: 28px;
		line-height: 40px;
		height: 120px;
		width: 100%;
	}
	
	.img-contaier {
		display: flex;
		margin-right: -32px;
		flex-wrap: wrap;
	}
	
	.panel-body-vertical .add-img-btn {
		position: relative;
		width: 140px;
		height: 140px;
		box-shadow: 1px 0px #dcdcdc, -1px 0px #dcdcdc, 0px 1px #dcdcdc, 0px -1px #dcdcdc;
		border-radius: 8px;
	}
	
	.panel-body-vertical .add-img-btn img {
		position: absolute;
		top: calc(50% - 24px);
		left: calc(50% - 30px);
		width: 60px;
		height: 48px;
	}
	
	.cause-item {
		display: inline-block;
		position: relative;
		width: 140px;
		height: 140px;
		margin-right: 32px;
	}
	
	.icon-del {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 34px;
		height: 34px;
		padding: 5px;
		z-index: 1000;
	}
	
	.cause-item .cause-img {
		width: 140px;
		height: 140px;
		border-radius: 8px;
	}
	
	.commit-btn {
		width: 550px;
		height: 88px;
		background: #ef364e;
		box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
		border-radius: 8px;
		text-align: center;
		line-height: 88px;
		margin: 72px auto;
		color: #fff;
		font-size: 30px;
	}
	
	.modal-body {
		padding: 30px;
	}
	
	.modal {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.modal-dialog {
		width: 670px;
		height: 602px;
		background-color: #FFFFFF;
		border-radius: 8px;
	}
	
	.modal .refund-csuse-item {
		padding: 30px 0;
		font-size: 36px;
		color: #4A4A4A;
		text-align: center;
		line-height: 50px;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.modal .refund-csuse-item:last-child {
		border-bottom-color: transparent;
	}
</style>